<template>
  <div class="box">
      <div>
        <div class="top">
            <span>文章上传</span>
            <div />
            </div>
        <el-row :span="24" justify="start" type="flex">
          <el-col :span="10">
            <div class="title">
              <p class="font">标题</p>
              <el-input v-model="form.title" style="width:500px" placeholder="请输入标题"></el-input>
            </div>
            <div class="image">
              <p class="font">封面图片</p>
              <imageUpload
                @input="save"
                :value="fileList"
                :limit="1"
                :urltype="'1'"
                :FileType="'STUDENT'"
              ></imageUpload>
            </div>
            <div class="constitution">
            <p class="font">内容</p>
            <Editor v-model="form.content">
            </Editor>
            </div>
            <div class="label">
              <p class="font">标签</p>
              <el-select v-model="form.keyword" style="width:500px" multiple placeholder="请选择">
                <el-option
                  v-for="(item,index) in keyWordList"
                  :key="index"
                  :label="item.keyword"
                  :value="item.keyword">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <div  class="button">
        <el-button size="medium" @click="reset()">重置</el-button>
        <el-button
          type="primary"
          size="medium"
          @click="submitForm"
          >提交</el-button>
        </div>
      </div>
  </div>
</template>
<script>
import { addArticle,getKeyword } from '@/api/society'
export default {
  data(){
    return{
      //提交参数
      form:{
        title:'',
        content:'',
        aid:'',
        keyword:'',
        url:'',
      },
      //文件列表
      fileList:[],
      //关键词列表
      keyWordList:[],

    }
  },
  created() {
    this.getKeyWord()
  },
  methods:{
    getKeyWord(){ 
      getKeyword().then(res =>{
        if(res.code == 200){
          this.keyWordList = res.data
        }
      })
    },
    //重置
    reset(){
      this.form = {
        title:'',
        content:'',
        aid:'',
        keyword:'',
        url:'',
      }
    },
    //提交
    submitForm(){
      let params = {
        ...this.form
      }
      addArticle(params).then(res=>{
        if(res.code == 200){
            this.$message({
            message: '上传成功',
            type: 'success'
          });
          setTimeout(this.back(), 1000);
        }
      }
      )
    },
      /** 上传封面图片 */
      save(data) {
      this.form.url = "";
      this.fileList = data;
      this.form.url = data[0].url;
    },
      //返回页面操作
    back() {
    this.$router.push({
      path: "/society/articleList",
    });
    },
  }
}

</script>
<style scoped>
.box{
  padding:24px;
  background-color: #f5f5f5;
}
.box > div{
  background-color: white;
  padding: 24px;
}
.font{
  font-family: Alibaba PuHuiTi;
  font-size: 15px;
  color: #4F5570;
  font-weight: 400;
}
.top{
  margin: 40px 0px 40px 56px;
  display: flex;
}
.top > span {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  margin-left: 8px;
  width: 90px;
}
.top > div {
  border-bottom: 1px solid #e5e5e5;
  height: 15px;
  width: 100%;
  padding-bottom: -20px;
  margin-left: 15px;
}
.top::before {
  content: "";
  width: 3px;
  background: #2854b7;
  height: 20px;
  border-radius: 2px;
}
.title,.button,.image,.label{
  margin-left:70px;
  margin-bottom: 30px;
}
.constitution{
  margin-left:70px;
}
.button el-button:first-child(){
  width:80px;
  line-height: 20px;
  height: 40px;
}
.button el-button:last-child(){
  margin-left: 30px;
  width:110px;
  height: 40px;
  border:none
}
</style>